﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Cookie+Redis Auth Demo (Web API)</title>
</head>
<body>
    <h2>登录</h2>
    <div>
        <input id="username" placeholder="用户名" value="alice" />
        <input id="password" placeholder="密码" value="password123" type="password" />
        <button id="btnLogin">登录</button>
        <button id="btnLogout">登出</button>
    </div>
    <h2>操作</h2>
    <div>
        <button id="btnProfile">获取个人信息 (受保护)</button>
        <div id="result" style="white-space:pre-wrap; margin-top:10px;"></div>
    </div>

    <script>
        const apiBase = 'http://localhost:58361'; // 修改为后端地址和端口

        document.getElementById('btnLogin').onclick = async () =>
        {
            console.log("abc");
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const res = await fetch(apiBase + '/api/Pono_No/login',
                {
            method: 'POST',
            credentials: 'include',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username, password })
            });
            const data = await res.json();
            document.getElementById('result').innerText = JSON.stringify({ status: res.status, data }, null, 2);
        };

        document.getElementById('btnProfile').onclick = async () =>
        {
  const res = await fetch(apiBase + '/api/profile', {
    method: 'GET',
    credentials: 'include'
  });
  if (res.status === 401) {
    document.getElementById('result').innerText = '未登录或会话过期，需重新登录';
    return;
  }
  const data = await res.json();
  document.getElementById('result').innerText = JSON.stringify({ status: res.status, data }, null, 2);
};

document.getElementById('btnLogout').onclick = async () => {
  const res = await fetch(apiBase + '/api/logout', {
    method: 'POST',
    credentials: 'include'
  });
  const data = await res.json();
  document.getElementById('result').innerText = JSON.stringify({ status: res.status, data }, null, 2);
};
    </script>
</body>
</html>